<script lang="ts" setup>
  import { ref, computed } from "vue"
  import gmDialog from '@/components/Dialog/index.vue'
  import { cloneDeep } from "lodash-es"
  import { saveOrUpdate } from '@/api/menu'
  import iconSelect from '@/components/IconSelect/index.vue'
  import { getMenuByLevel } from "@/api/menu"
  import { type FormInstance, type FormRules, ElMessage } from "element-plus"
  import * as instance from '@/api/menu/types/instance'

  interface Props {
    data?: instance.menuFormInstance
  }

  const props = withDefaults(defineProps<Props>(), {
    data: ()=>({}),
  })

  const form = ref<instance.menuFormInstance>(cloneDeep(props.data) || {
    type: 1,
  })
  const formRef = ref<FormInstance>()
  const menuList = ref<Array<instance.menuFormInstance>>([])
  const directoryList = ref<any>([])
  const dialogRef = ref<InstanceType<typeof gmDialog>>()
  const emit = defineEmits(['cancel','success'])

  const rules: FormRules = {
    name: [
      { required: true, message: '请输入名称', trigger: 'change' },
    ],
    url: [
      { required: true, message: '请输入路径', trigger: 'change' },
    ],
    icon: [
      { required: true, message: '请选择图标', trigger: 'change' },
    ],
    code: [
      { required: true, message: '请输入编码', trigger: 'change' },
    ]
  }

  const IS_DIRECTORY = computed<boolean>(()=>form.value.type === 1)
  const IS_MENU = computed<boolean>(()=>form.value.type === 2)
  const IS_BTN = computed<boolean>(()=>form.value.type === 3)

  const cancel = ()=>{
    emit('cancel')
  }

  const getMenuList = () => {
    getMenuByLevel({level:1}).then((res: any)=>{
      directoryList.value = res
    })
    getMenuByLevel({level:2}).then((res: any)=>{
      menuList.value = res
    })
  }

  const success =  async(formEl: FormInstance | undefined)=>{
    dialogRef.value.setLoading(true)
    form.value.isIframe = !form.value.isIframe ? false : true
    form.value.sort = !form.value.sort ? 1 : form.value.sort
    form.value.level = form.value.type
    await formEl?.validate((valid) => {
      if (!valid) {
        dialogRef.value.setLoading(false)
        return
      }

      let params = {
        code: form.value.code,
        icon: form.value.icon,
        level: form.value.level,
        menuId: form.value.menuId,
        name: form.value.name,
        parentId: form.value.parentId,
        sort: form.value.sort,
        type: form.value.type,
        url: form.value.url,
      }

      saveOrUpdate(params).then(()=>{
         ElMessage({
            message: '操作成功',
            type: 'success',
          })
        emit('success')
      }).catch(()=>{
        dialogRef.value.setLoading(false)
      })
    })
  }

  const changeType = ()=>{
  }

  getMenuList()
</script>

<template>
  <gm-dialog
    ref="dialogRef"
    :title="!form.menuId ? '新增菜单' : '修改菜单'"
    @cancel="cancel"
    @comfirm="success(formRef)">
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px" label-position="left">
      <el-form-item prop="type" label="类型">
        <el-radio-group v-model="form.type" @change="changeType">
          <el-radio-button label="目录" :value="1" />
          <el-radio-button label="菜单" :value="2" />
          <el-radio-button label="按钮" :value="3" />
        </el-radio-group>
      </el-form-item>
      <el-form-item v-if="IS_MENU || IS_BTN" prop="parentId" label="父级">
        <el-select
          v-model="form.parentId"
          placeholder=""
          style="width: 240px"
        >
          <template v-if="IS_MENU">
            <el-option  v-for="item in directoryList" :key="item.menuId" :label="item.name" :value="item.menuId"/>
          </template>
          <template v-if="IS_BTN">
            <el-option  v-for="item in menuList" :key="item.menuId" :label="item.name" :value="item.menuId"/>
          </template>
        </el-select>
      </el-form-item>
      <el-form-item v-if="IS_DIRECTORY || IS_MENU" prop="sort" label="排序">
        <el-input-number style="width: 240px" v-model="form.sort" :min="1"/>
      </el-form-item>
      <el-form-item  prop="name" label="名称">
        <el-input v-model="form.name" placeholder="" />
      </el-form-item>
      <el-form-item  prop="code" label="编码">
        <el-input v-model="form.code" placeholder="" />
      </el-form-item>
      <el-form-item v-if="IS_DIRECTORY" prop="icon" label="图标">
        <!-- <icon-select v-model="form.icon" /> -->
        <el-input v-model="form.icon" placeholder="" />
      </el-form-item>
      <!-- <el-form-item v-if="IS_MENU" prop="isIframe" label="Iframe">
        <el-radio-group v-model="form.isIframe">
          <el-radio-button label="否" value="否" />
          <el-radio-button label="是" value="是" />
        </el-radio-group>
      </el-form-item> -->
      <el-form-item v-if="IS_MENU" prop="url" label="路径">
        <el-input v-model="form.url" placeholder="" />
      </el-form-item>
    </el-form>
  </gm-dialog>
</template>


<style lang="scss" scoped>
:deep(.el-input__wrapper) {
  .el-icon{
    color:#333;
    font-size:20px;
  }
}
</style>
